﻿<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数据质量管理系统</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <!-- 引入样式 -->
    <link rel="stylesheet" th:href="@{/Vue/ElemtUI/ElementIndex.css}">
    <link rel="stylesheet" th:href="@{/layui/css/tableFilter.css}">
    <!--Axios请求-->
    <script th:src="@{/Vue/axios.min.js}" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<div class="layui-inline">
    <input type="text" value="" placeholder="请输入供应商名称" class="layui-input search_input" id="demoReload"/>
</div>
<div class="layui-inline">
    <button class="layui-btn layui-btn-sm layui-btn-normal" id="layui-btn-search" data-type="reload">查询</button>
    <button class="layui-btn layui-btn-sm layui-btn-normal" id="layui-btn-add">新增</button>
    <button class="layui-btn layui-btn-sm layui-btn-normal" id="layui-btn-del">批量删除</button>
</div>
<table class="layui-table" id="apitable" lay-filter="apitable"></table>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/layui/tableFilter.js}"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script th:src="@{/layui/layui.js}"></script>
<script>
    layui.use(['table', 'form', 'layer'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        //API演示
        var apitable = table.render({
            elem: '#apitable',
            page: true,
            limits: [15, 30, 50],
            limit: 15,// 每页默认显示的数量
            url: '/qa/biaozhun/pageIndex',
            cols: [ [
                {checkbox: true, fixed: 'left'},
                {type: 'numbers', title: '序号', fixed: 'left'},
                {field: 'cnName', title: '数据质量名称', width: 140},
                {field: 'syfw', title: '适用范围', width: 130},
                {field: 'sjzllx', title: '数据质量类型', width: 130},
                {field: 'createUser', title: '创建人', width: 80},
                {field: 'createTime', title: '创建时间', width: 130},
                {field: 'ckwx', title: '参考文献', width: 130},
                {field: 'sjzlbzml', title: '数据质量标准目录', width: 140},
                {field: 'fbzt', title: '发布状态', width: 100}
                , {fixed: 'right', width: 150, align: 'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
            ] ],
            done: function (res, curr, count) {
                //非常重要！如果使table.reload()后依然使用过滤，就必须将过滤组件也reload()一下
            }
        });
        var $ = layui.$, active = {
            reload: function () {
                var demoReload = $('#demoReload');
                //执行重载
                table.reload('apitable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        key: {
                            id: demoReload.val()
                        }
                    }
                });
            }
        };

        $('#layui-btn-add').on('click', function () {
            window.location.href = "/qa/sjbz/insert";
            /*layer.open({
                //打开一个iframe
                type: 2,
                title: '<h1>数据标准及规范管理->新增</h1>',
                content: '/sjbz/insert',
                maxmin: true,
                area: ['1200px', '780px'],
                // btn: ['确定', '取消'],
                yes: function (index, layero) {
                    //点击确认触发 iframe 内容中的按钮提交
                    var frm = layero.find('iframe').contents().find("#lay-form-submit");
                    frm.click();
                    layer.close(index)
                }
            });*/
        });


        $('#layui-btn-search').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //在页面中的<table>中必须配置lay-filter="tb_goods"属性才能触发属性!!!
        table.on('tool(apitable)', function (obj) {
            let row = obj.data;
            if (obj.event == "del") {
                layer.confirm('确认删除吗?', {icon: 3, title: '提示'}, function (index) {
                    $.post('/user.action', {
                        'methodName': 'del',
                        'id': row.id
                    }, function (rs) {
                        if (rs.success) {
                            //调用查询方法刷新数据
                            $('#serch_btn').click();
                        } else {
                            layer.msg(rs.msg, function () {
                            });
                        }
                    }, 'json');
                    layer.close(index);
                });
            }
            if (obj.event == "edit") {
                layer.confirm('确认删除吗?', {icon: 3, title: '提示'}, function (index) {
                    $.post('/user.action', {
                        'methodName': 'del',
                        'id': row.id
                    }, function (rs) {
                        if (rs.success) {
                            //调用查询方法刷新数据
                            $('#serch_btn').click();
                        } else {
                            layer.msg(rs.msg, function () {
                            });
                        }
                    }, 'json');
                    layer.close(index);
                });
            }
        });
    })
</script>
</body>
</html>